import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';
import UnoCSS from 'unocss/vite';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    UnoCSS(),
    AutoImport({
      resolvers: [VantResolver()],
    }),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  /** 相对路径引入文件 */
  base: './',
  server: {
    port: 9090,
    host: '0.0.0.0',
  },
  build: {
    outDir: 'ui',
    commonjsOptions: {
      include: /node_modules|lib/
    },
    /** 这个是配置入口js的输出目录? */
    assetsDir: './js',
    /** 分包后警告大小（未压缩大小） */
    chunkSizeWarningLimit: 1000,
    /** 
     * 启用/禁用 CSS 代码拆分
     * 除去element.css，其它所有css加起来gzip后大约是30kb（工作台加载20个css大小约是20kb）
     * 不拆分css能加快首次渲染速度，但css变化会导致hash变化，但是从缓存中读取多个css文件也比较耗时？
     */
    cssCodeSplit: true,
    rollupOptions: {
      output: {
        format: 'esm', // 打包模式
        /** 
         * 第三方库单独分包，顺序会影响加载(如element加载需要vue先加载)
         * ps: 使用的api不同，树摇后的hash也不同
         * 但由于项目后期使用到的api基本趋于稳定，所以hash也趋于稳定
         */
        manualChunks: {
          // vue: ['vue'], // 82kb d929475c
          // 'vue-router': ['vue-router'], // 23kb e5da2ed4
          // element: ['element-plus'], // 748kb 0c0e8099
          // axios: ['axios'], // 25kb b45127a5
          // 'micro-app': ['@micro-zoe/micro-app'],
        },
        /** 入口文件输出格式 */
        entryFileNames: 'js/[name].[hash]_h.js',
        /** js文件输出格式 */
        chunkFileNames: 'js/[name].[hash]_h.js',
        /** 资源文件输出格式 */
        assetFileNames: (assetInfo) => {
          /** 默认输出格式 */
          const defaultFormat = '[ext]/[name].[hash]_h.[ext]';
          /** 图片后缀 */
          const imageExts = ['png', 'jpg', 'jpeg', 'webp', 'gif', 'svg', 'ico'];
          /** 字体后缀 */
          const fontExts = ['ttf', 'woff', 'woff2'];
          /** 当前文件后缀 */
          const fileExt = assetInfo.name?.split('.').slice(-1)[0];
          /** 提取文件后缀异常处理 */
          if (!fileExt) {
            console.warn('>>> 文件后缀异常: ', assetInfo);
            return defaultFormat;
          }
          /** 图片资源 */
          if (imageExts.includes(fileExt)) {
            return 'img/[name].[hash]_h.[ext]';
          } else if (fontExts.includes(fileExt)) {
            return 'font/[name].[hash]_h.[ext]';
          }
          /** 其它资源 */
          return defaultFormat;
        },
      },
    },
  },
})
